/**
 * admui-basic v2.1.0 (http://www.admui.com/)
 * Copyright 2015-2019 Admui Team
 * Licensed under the Admui License 1.1 (http://www.admui.com/about/license)
 */
(function(document, window, $) {
  'use strict';

  /* global Chartist */
  /* eslint no-underscore-dangle: ["error", { "allow": ["_node"] }] */

  // TODO: 需要完善侧边栏
  window.App.extend({
    handlePagination: function() {
      var $panelFooterLi = $('.panel-footer ul.pagination>li');
      var $allPage = $panelFooterLi.not(':first').not(':last');
      var $prev = $panelFooterLi.first();
      var $next = $panelFooterLi.last();

      // 判断是否为第一页或最后页，禁止对应上一页或下一页按钮
      function isEnd(obj) {
        var $prevObj = obj.prev();
        var $nextObj = obj.next();

        if ($prevObj.index() === 0) {
          $prevObj.addClass('disabled');
          $next.removeClass('disabled');
        } else if ($nextObj.index() === $panelFooterLi.length - 1) {
          $nextObj.addClass('disabled');
          $prev.removeClass('disabled');
        } else {
          $next.removeClass('disabled');
          $prev.removeClass('disabled');
        }
      }

      // 点击页码
      $allPage.on('click', function() {
        var $item = $(this);

        $item.siblings('li').removeClass('active');
        $item.addClass('active');
        isEnd($(this));
      });

      // 上一页
      $prev.on('click', function() {
        var $prevPage = $allPage.filter('.active').prev();

        if (!$(this).hasClass('disabled')) {
          $prevPage.siblings('li').removeClass('active');
          $prevPage.addClass('active');
          isEnd($prevPage);
        }
      });

      // 下一页
      $next.on('click', function() {
        var $nextPage = $allPage.filter('.active').next();

        if (!$(this).hasClass('disabled')) {
          $nextPage.siblings('li').removeClass('active');
          $nextPage.addClass('active');
          isEnd($nextPage);
        }
      });
    },
    handleChart: function() {
      // 折线图初始化
      var scoreChart = function(data) {
        var chart = new Chartist.Line(
          data,
          {
            labels: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            series: [
              {
                name: 'series-1',
                data: [0.8, 1.5, 0.8, 2.7, 2.4, 3.9, 1.1]
              },
              {
                name: 'series-2',
                data: [2.2, 3, 2.7, 3.6, 1.5, 1, 2.9]
              }
            ]
          },
          {
            lineSmooth: Chartist.Interpolation.simple({
              divisor: 100
            }),
            fullWidth: true,
            chartPadding: {
              right: 25
            },
            series: {
              'series-1': {
                showArea: false
              },
              'series-2': {
                showArea: false
              }
            },
            axisX: {
              showGrid: false
            },
            axisY: {
              scaleMinSpace: 40
            },
            plugins: [Chartist.plugins.tooltip()],
            low: 0,
            height: 250
          }
        );
        console.log(chart);

        scoreChart.on('draw', function(opts) {
          var parent;

          if (data.type === 'point') {
            parent = new Chartist.Svg(opts.element._node.parentNode);

            parent.elem('line', {
              x1: opts.x,
              y1: opts.y,
              x2: opts.x + 0.01,
              y2: opts.y,
              class: 'ct-point-content'
            });
          }
        });
      };

      /* var WeekLabelList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
             var WeekSeries1List = {
             name: "series-1",
             data: [0.8, 1.5, 0.8, 2.7, 2.4, 3.9, 1.1]
             };
             var WeekSeries2List = {
             name: "series-2",
             data: [2.2, 3, 2.7, 3.6, 1.5, 1, 2.9]
             }; */

      // 饼状图初始化
      var barChart = function(data) {
        var chart = new Chartist.Bar(
          data,
          {
            labels: ['梅小燕', '唐雪琴', '陈媚婉', '嵇慧莉', '刘文平', '孙玉珍', '柳映秋'],
            series: [[3.3, 3.5, 2.5, 2, 3.7, 2.7, 1.9], [2, 4, 3.5, 2.7, 3.3, 3.5, 2.5]]
          },
          {
            axisX: {
              showGrid: false
            },
            axisY: {
              showGrid: false,
              scaleMinSpace: 30
            },
            height: 210,
            seriesBarDistance: 24
          }
        );
        console.log(chart);

        barChart.on('draw', function(opts) {
          var parent;

          if (opts.type === 'bar') {
            parent = new Chartist.Svg(opts.element._node.parentNode);

            parent.elem('line', {
              x1: opts.x1,
              x2: opts.x2,
              y1: opts.y2,
              y2: 0,
              class: 'ct-bar-fill'
            });

            opts.element.attr({
              style: 'stroke-width: 20px'
            });
          }
        });
      };

      // 侧边栏加载完成时显示图表
      $(document).on('slidePanel::afterLoad', function() {
        scoreChart('.trends-chart');
        barChart('.member-chart');
      });
    },
    handleSelective: function() {
      var self = this;
      var member = [
        {
          id: 'uid_1',
          name: '梅小燕',
          avatar: '../../../../public/images/portraits/1.jpg'
        },
        {
          id: 'uid_2',
          name: '赵桦',
          avatar: '../../../../public/images/portraits/2.jpg'
        },
        {
          id: 'uid_3',
          name: '曹洁群',
          avatar: '../../../../public/images/portraits/3.jpg'
        },
        {
          id: 'uid_4',
          name: '嵇慧莉',
          avatar: '../../../../public/images/portraits/4.jpg'
        },
        {
          id: 'uid_5',
          name: '孙玉珍',
          avatar: '../../../../public/images/portraits/5.jpg'
        },
        {
          id: 'uid_6',
          name: '柳映秋',
          avatar: '../../../../public/images/portraits/6.jpg'
        },
        {
          id: 'uid_7',
          name: '周伊娅',
          avatar: '../../../../public/images/portraits/7.jpg'
        }
      ];

      // 获取数量
      function getNum(num) {
        return Math.ceil(Math.random() * (num + 1));
      }

      // 获取成员
      function getMember() {
        return member[getNum(member.length - 1) - 1];
      }

      // 查重
      function isSame(opts) {
        var items = opts;
        var memberC = getMember();

        if (items.indexOf(memberC) === -1) {
          return memberC;
        }

        return isSame(items);
      }

      // 整理成员
      function pushMember(num) {
        var items = [];
        var i = 0;

        for (; i < num; i++) {
          items.push(isSame(items));
        }
        self.items = items;
      }

      // 设置列表项
      function setItems(membersNum) {
        var num = getNum(membersNum - 1);
        pushMember(num);
      }

      // 人员选择初始化
      $('[data-plugin="jquery-selective"]').each(function() {
        var items;

        setItems(member.length);

        items = self.items;

        $(this).selective({
          namespace: 'addMember',
          local: member,
          selected: items,
          buildFromHtml: false,
          tpl: {
            optionValue: function(data) {
              return data.id;
            },
            frame: function() {
              return (
                '<div class="' +
                this.namespace +
                '">' +
                this.options.tpl.items.call(this) +
                '<div class="' +
                this.namespace +
                '-trigger">' +
                this.options.tpl.triggerButton.call(this) +
                '<div class="' +
                this.namespace +
                '-trigger-dropdown">' +
                this.options.tpl.list.call(this) +
                '</div>' +
                '</div>' +
                '</div>'
              );
            },
            triggerButton: function() {
              return (
                '<div class="' + this.namespace + '-trigger-button"><i class="wb-plus"></i></div>'
              );
            },
            listItem: function(data) {
              return (
                '<li class="' +
                this.namespace +
                '-list-item"><img class="avatar" src="' +
                data.avatar +
                '"> ' +
                data.name +
                '</li>'
              );
            },
            item: function(data) {
              return (
                '<li class="' +
                this.namespace +
                '-item"><img class="avatar" src="' +
                data.avatar +
                '" title="' +
                data.name +
                '"> ' +
                this.options.tpl.itemRemove.call(this) +
                '</li>'
              );
            },
            itemRemove: function() {
              return (
                '<span class="' + this.namespace + '-remove"><i class="wb-minus-circle"></i></span>'
              );
            },
            option: function(data) {
              return (
                '<option value="' +
                this.options.tpl.optionValue.call(this, data) +
                '">' +
                data.name +
                '</option>'
              );
            }
          }
        });
      });
    },
    run: function() {
      this.items = [];

      this.handlePagination();
      this.handleChart();
      this.handleSelective();
    }
  });

  $(function() {
    window.App.run();
  });
})(document, window, jQuery);
